<template>
  <div class="register" ref="register">
    <div class="box">
      <div class="logoBox">
        <img src="../../images/logo.png"  class="logo" alt="logo"/>
      </div>
        <div class="registerBox">
          <input type="text" placeholder="邮箱" id="email" v-model="email" @blur="hasEmail">
          <input type="password" placeholder="密码" id="password" v-model="passWord" @blur="pwRight">
          <input type="text" placeholder="昵称" id="nick" v-model="nick" @blur="nickRight">
          <div class="codeBox">
            <input type="text" placeholder="验证码" class="code" v-model="verifyCode">
            <button @click.prevent="getVerifyCode" class="btn" v-show="!computedTime">获取验证码</button>
            <button  @click.prevent v-show="computedTime" class="btn btnActive">已发送({{computedTime}}s)</button>
          </div>
        </div>
        <button class="btn" @click="register">注册</button>
      <div class="loginLink">
        <span>已经有帐号了？</span>
        <router-link to="login">那就登录呗!</router-link>
      </div>

    </div>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>

  </div>
</template>

<script>
  import alertTip from '../../components/common/alertTip'
  import CryptoJS from 'crypto-js'

  export default {
    data () {
      return {
        email: null, //邮箱地址
        passWord: null, //密码
        md5PassWord: null, //md5加密后的密码
        nick: null, //昵称
        verifyCode: null,  //验证码
        computedTime: 0, //倒数记时
        userInfo: null, //获取到的用户信息
        showAlert: false, //显示提示组件
        alertText: null, //提示的内容
      }
    },
    components: {
      alertTip,
    },
    computed: {
      //判断邮箱地址
      rightEmail: function (){
        return /^\w+@(\w+.)+com$/gi.test(this.email)
      },
      rightVerifyCode: function () {
        if (this.verifyCode.length == 4){
            return /^\d+$/gi.test(this.verifyCode);
        }
        return false;
      }
    },
    methods: {
      /**
       * 向服务器发送请求，查询邮箱是否已经被注册
       * @returns {Promise.<void>}
       */
      async hasEmail(){
        if (this.email == null){
          this.showAlert = true;
          this.alertText = '邮箱不能为空！';
          return;
        }

        if (!this.rightEmail){
          this.showAlert = true;
          this.alertText = '邮箱格式不正确！';
          return;
        }

        let res = null;
        let url = '/email?email=' + this.email
        await this.axios.get(url)
          .then(response => {
          res = response.data;
        })

        if (!res.success){
          this.showAlert = true;
          this.alertText = res.errors.messageCn;
          return;
        }
      },

      pwRight(){
        if (this.passWord == null){
          this.showAlert = true;
          this.alertText = '密码不能为空！';
          return
        }
        if (this.passWord.length < 8 || this.passWord.length > 16){
          this.showAlert = true;
          this.alertText = '密码长度在8～16位之间！';
          return
        }

      },
      nickRight(){
        if (this.nick == null){
          this.showAlert = true;
          this.alertText = '昵称不能为空！';
          return
        }
        if (this.nick.length > 10){
          this.showAlert = true;
          this.alertText = '昵称长度不能大于10！';
          return
        }
      },

      /**
       * 向服务器发送请求，请求服务器向指定的邮箱发送验证码
       * @returns {Promise.<void>}
       */
      async getVerifyCode(){
        if (this.email == null){
          this.showAlert = true;
          this.alertText = '邮箱不能为空！';
          return;
        }

        if (!this.rightEmail){
          this.showAlert = true;
          this.alertText = '邮箱格式不正确！';
          return;
        }

        let res01 = null;
        let url01 = '/email?email=' + this.email
        await this.axios.get(url01)
          .then(response => {
            res01 = response.data;
          })

        if (!res01.success){
          this.showAlert = true;
          this.alertText = res01.errors.messageCn;
          return;
        }

          let res = null;
          let url = '/register_code?email=' + this.email
          await this.axios.get(url).then(response => {
            res = response.data;
          })

          if (res.success){
            this.showAlert = true;
            this.alertText = '验证码已发送到您的邮箱，请您查收。该验证码有效时长为5分钟。';

            this.computedTime = 300;
            this.timer = setInterval(() => {
              this.computedTime --;
              if (this.computedTime == 0) {
                clearInterval(this.timer)
              }
            }, 1000)

          }else {
            this.showAlert = true;
            this.alertText = '网络链接失败，请重试。';
          }


      },

      /**
       * 注册
       * @returns {Promise.<void>}
       */
      async register(){
        if (this.email == null){
          this.showAlert = true;
          this.alertText = '邮箱不能为空！';
          return;
        }

        if (!this.rightEmail){
          this.showAlert = true;
          this.alertText = '邮箱格式不正确！';
          return;
        }

        let res01 = null;
        let url01 = '/email?email=' + this.email
        await this.axios.get(url01)
          .then(response => {
            res01 = response.data;
          })

        if (!res01.success){
          this.showAlert = true;
          this.alertText = res01.errors.messageCn;
          return;
        }
          if (this.passWord == null){
            this.showAlert = true;
            this.alertText = '密码不能为空！';
            return
          }
          if (this.nick == null){
            this.showAlert = true;
            this.alertText = '昵称不能为空！';
            return
          }
          if (this.verifyCode == null){
            this.showAlert = true;
            this.alertText = '验证码不能为空！';
            return
          }
          if(!this.rightVerifyCode){
            this.showAlert = true;
            this.alertText = '验证码格式不正确！';
            return
          }

          if (this.passWord.length < 8 || this.passWord.length > 16){
            this.showAlert = true;
            this.alertText = '密码长度在8～16位之间！';
            return
          }

          if (this.nick.length > 10){
            this.showAlert = true;
            this.alertText = '昵称长度不能大于10！';
            return
          }


          this.md5PassWord = CryptoJS.MD5(this.passWord);

          let res = null;
          let param = {
            email: this.email,
            password: this.md5PassWord.toString(),
            nick: this.nick,
            code: this.verifyCode
          }
          await this.axios.post('/register', param)
            .then(response => {
            res = response.data;
          })

          if (res.success){
            this.$router.push('login');
          }else {
            this.showAlert = true;
            this.alertText = res.errors.messageCn;
          }

      },
      closeTip(){
        this.showAlert = false;
      }
    },
    mounted (){
      let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

      if(w < h){
        this.$refs.register.style.height = h +'px';
      }else {
        this.$refs.register.style.height = 1.1*w +'px';
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../style/mixin';
  .register{
    background-color: #33CCFF;

    p, span, input{
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    a{
      font-size: 0.5rem;
      color: #FFFFFF;
      text-decoration: underline;
    }


    .box{
      margin: 0 auto;
      position:absolute;
      top:0;
      left:0;
      width: 16rem;
      height: 16rem;
    }
    /*logo样式区  开始*/
    .logoBox{
      margin: 0 auto;
      width: 7rem;
      height: 3.5rem;
    }

    .logo{
      width: 5.6rem;
      height: 3.5rem;
      margin-top: 1rem;
      margin-left: 0.5rem;
      display: block;
    }
    /*logo样式区  结束*/

    /* 帐号密码输入区样式  开始*/
    .registerBox{
      margin: 0 auto;
      width: 9rem;
      height: 6rem;
      border: solid 0.05rem #ffffff;
      @include borderRadius(0.4rem);
      margin-top: 2rem;

      input{
        width: 100%;
        height: 25%;
        display: block;
        background-color: transparent;
        margin: 0;
        padding: 0;
        border: hidden;
        font-size: 0.5rem;
        text-indent: 0.4rem;
      }
      ::-webkit-input-placeholder{
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }

      #email,#password,#nick{
        border-bottom: solid 0.05rem #FFFFFF;
      }
      /* 帐号密码输入区样式  结束*/
      /*获取验证码样式  开始*/
      .codeBox{
        width: 100%;
        height: 25%;
        .code{
          display: inline;
          width: 4.2rem;
          height: 100%;
        }
        .btn{
          display: inline;
          width: 4.2rem;
          height: 80%;
          margin: 0;
        }
        .btnActive{
          background-color: #bbbbbb;
        }
      }
      /*获取验证码样式  结束*/
    }



    /*登录按钮样式  开始*/
    .btn{
      margin: 0 auto;
      display: block;
      background-color: #FFFFFF;
      width: 9rem;
      height: 1.4rem;
      color: #33CCFF;
      font-size: 0.5rem;
      font-weight: bold;
      @include borderRadius(0.7rem);
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    /*登录按钮样式  结束*/

    span{
      font-size: 0.5rem;
      color: #FFFFFF;
    }

    .loginLink{
      text-align: center;
    }

  }




</style>
